<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->
    <title>文件打印</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
    <script>
        //一般直接写在一个js文件中
        layui.use( ['form', 'layedit', 'laydate','upload'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
                ,layer = layui.layer
                ,form = layui.form;


            var uid = $("#uid").val();
            var pid = $("#pid").val();
            if (uid == "") {
                uid = "-1";
                layer.msg('用户加载失败');
            }
            //var url = "http://jxsbbx.gzmu.edu.cn";
            var ws;
            var heartCheck;
            function connect() {
                ws = new WebSocket('wss://jxsbbx.gzmu.edu.cn/print');
                /*** 因为服务端在 300s 未传输数据时会主动关闭连接，所以，客户端需要定时发送数据保持连接*/
                heartCheck = {
                    timeout: 290000,
                    reset: function(){
                        clearInterval(this.timeoutObj);
                        this.start();
                    },
                    start: function(){
                        this.timeoutObj = setInterval(function(){
                            if(ws.readyState === 1){
                                var msg = {from:uid, to: -1, content: "heartbeat", type:"heartbeat"};
                                ws.send(JSON.stringify(msg));
                            }
                        }, this.timeout)
                    }
                };

                ws.onopen = function (evnt) {
                    console.log("+++onopen: ", evnt);
                    var msg = {from: uid, to: "-1", content: "request", type:"request"};
                    ws.send(JSON.stringify(msg));
                    heartCheck.start();
                };
                ws.onmessage = function(message){
                    // 无论收到什么信息，说明当前连接正常，将心跳检测的计时器重置
                    heartCheck.reset();
                    console.log("client received a message.data: " + message.data);
                    if (message.data != "hb_ok") {
                        // 不要将ping的答复信息输出
                        console.log("+++msg:" + JSON.stringify(message.data));
                        //var response = JSON.parse(message.data);
                        showResponse(JSON.stringify(message.data));
                    }
                };
                ws.onclose  = function (event) {
                    if (event.code !== 4500) {
                        connect();
                    }
                };
            }

            function disconnect() {
                if (ws != null) {
                    ws.disconnect();
                }
                clearInterval(heartCheck);
                console.log("Disconnected");
            }

            window.onbeforeunload = disconnect;
            //监听提交
            form.on('submit(formDemo)', function(data){
                var content =JSON.stringify(data.field);
                if (pid == "") {
                    layer.msg('加载打印机失败');
                }else{
                    var msg = {from: uid, to: pid, content: content, type:"messsage"};
                    var datajson = JSON.stringify(msg);
                    console.log("+++datajson: ", datajson);
                    ws.send(datajson);
                }
                return false;
            });

            upload.render({
                elem: '#uploadFile',
                url: '/upload',
                accept: 'file',
                exts: 'doc|docx|pdf|png|jpeg|jpg|bmp',
                data: {uid: uid},
                done: function(res){
                    console.log("+++result: ", res.result);
                    if(res.result){
                        $("#name").val(res.name);
                        $("#path").val(res.path);
                    } //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(uploadInst){
                        uploadInst.upload();
                    });
                }
            });

            $('#choseFile').on('click',function (){
                wx.miniProgram.navigateTo({
                    url:'/pages/firstpage/index/index',
                    success: function(){
                        console.log('success')
                    },
                    fail: function(){
                        console.log('fail');
                    },
                    complete:function(){
                        console.log('complete');
                    }
                });
            });

            $('#chosePrint').on('click',function(){
                wx.miniProgram.navigateTo({
                    url:'/pages/scan/scan',
                    success: function(){
                        console.log('success')
                    },
                    fail: function(){
                        console.log('fail');
                    },
                    complete:function(){
                        console.log('complete');
                    }
                });
            });
            connect();
        });
    </script>
</head>
<body>

<!-- 你的HTML代码 -->
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">打印机名：</label>
        <div class="layui-input-block">
            <input id="pid" type="text" name="pid" required  lay-verify="required" th:value="${pid}"  autocomplete="off" class="layui-input">
            <button type="button" class="layui-btn-danger layui-btn-sm" id="chosePrint">扫描打印机</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">打印文件：</label>
        <div class="layui-input-block">
            <input id="name" type="text" name="name" required  lay-verify="required" th:value="${name}" placeholder="未上传文件" autocomplete="off" class="layui-input">
            <button type="button" class="layui-btn-danger layui-btn-sm" id="choseFile">已传文件</button>
            <button type="button" class="layui-btn-danger layui-btn-sm" id="uploadFile">本地文件</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">打印份数：</label>
        <div class="layui-input-block">
            <input type="text" name="copies" required  lay-verify="required" value="1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">打印范围：</label>
        <div class="layui-input-block">
            <select lay-filter="aihao" name="rang" >
                <option value="0" selected="">全部打印</option>
                <option value="1">所选内容</option>
                <option value="2">当前页面</option>
                <option value="3">指定范围</option>
                <option value="4">页面范围</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">指定页码：</label>
        <div class="layui-input-block">
            <!--<input type="text" name="pages" required lay-verify="required" placeholder="指定页码：如2,3-5，打印第二页和三到五页,打印范围为4时有效" autocomplete="off" class="layui-input">-->
            <input type="text" name="pages" required lay-verify="required" value="2,3-5" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">起始页：</label>
        <div class="layui-input-inline">
            <input type="text" name="from" required lay-verify="required" value="3" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">终止页：</label>
        <div class="layui-input-inline">
            <input type="text" name="to" required lay-verify="required" value="5" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单双打印：</label>
        <div class="layui-input-block">
            <input type="radio" name="duplex" value="0" title="单面打印" >
            <input type="radio" name="duplex" value="1" title="双面打印" checked="">
        </div>
    </div>

    <input id="path" type="hidden" name="path" th:value="${path}" >
    <input id="uid" type="hidden" name="uid" th:value="${uid}" />

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">打印</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

</body>
</html>